<template>
	<view>
		<view class="address-section">
			<!-- <mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker"
				:pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker> -->
			<view class="row b-b">
				<text class="tit">联系公司</text>
				<text>{{configInfo.phone}}</text>
			</view>
			<view class="row b-b">
				<text class="tit">公司开户行</text>
				<text>{{configInfo.bank_name}}</text>
			</view>
			<view class="row b-b">
				<text class="tit">公司账号</text>
				<text>{{configInfo.bank_number}}</text>
			</view>
			<view class="row b-b">
				<text class="tit">公司开户人</text>
				<text>{{configInfo.bank_user}}</text>
			</view>

			<!-- <view class="row b-b">
				<text class="tit">支付宝收款码</text>
				<image :src="configInfo.alipay" mode=""></image>
			</view>

			<view class="row b-b">
				<text class="tit">微信收款码</text>
				<image :src="configInfo.wechat" mode=""></image>
			</view> -->

			<view class="row b-b">
				<text class="tit">充值币种</text>
				<radio-group name="moneytype">
					<label>
						<radio value="1" checked="" /><text>报单币</text>
					</label>
					<label style="margin-left: 20px;">
						<radio value="2" /><text>余额</text>
					</label>
				</radio-group>
			</view>

			<view class="row b-b">
				<text class="tit">充值金额</text>
				<input class="input" v-model="money" type="number" placeholder="请输入充值金额"
					placeholder-class="placeholder" />
			</view>

			<view class="row b-b">
				<text class="tit">手机号码</text>
				<input class="input" v-model="mobile" type="number" placeholder="请输入手机号码"
					placeholder-class="placeholder" />
			</view>

			<view class="row b-b">
				<text class="tit">上传打款截图</text>
				<robby-image-upload :src="src" :width="width" :height="height" :lineheight="lineheight"
					:borderRadius="borderRadius"></robby-image-upload>
			</view>

			<button class="add-btn" @click="confirm">提交</button>

			<view class="place" style="height: 20px;width: 100%"></view>
		</view>
	</view>
</template>

<script>
	import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload1.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		components: {
			robbyImageUpload
		},
		data() {
			return {
				title: '',
				id: 0,
				configInfo: {},
				src: '/static/img/login/add.png',
				width: '450upx',
				height: '450upx',
				lineheight: '450upx',
				borderRadius: '0',
				money: '',
				mobile: '',
			}
		},
		onLoad() {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}

			this.getConfigInfo();

			uni.$on('changeRechargeIcon', (options) => {
				this.src = options.path;
			})
		},
		computed: {
			...mapState(['hasLogin']),
		},
		methods: {
			...mapMutations(['login', 'logout']),

			async getConfigInfo() {
				let token = uni.getStorageSync('token');

				if (!token) {
					this.$api.msg('token缺失！');
				}
				let url = '/configs';
				let res = await this.$myRequest({
					url: url
				})

				let info = res.data.data;
				this.configInfo = info;
			},

			//提交
			async confirm() {
				if (!this.hasLogin) {
					this.islogin = true
					return false;
				}

				if (this.money <= 0) {
					this.$api.msg('充值额度不能小于零');
					return;
				}
				if (!/(^1[3|4|5|7|8|9][0-9]{9}$)/.test(this.mobile)) {
					this.$api.msg('请输入正确的手机号码');
					return;
				}

				if (this.src == '/static/img/login/add.png') {
					this.$api.msg('必须上传打款截图！');
					return;
				}

				let dataObj = {
					money: this.money,
					mobile: this.mobile,
					icon: this.src,
					token: uni.getStorageSync('token')
				}

				let res = await this.$myRequest({
					url: '/reReply',
					data: dataObj,
					methods: 'post'
				})

				if (res.data.status == 1) {
					uni.$emit('changeAddress')
					this.$api.msg(res.data.msg);
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				}
			}
		},
	}
</script>

<style lang="scss">
	page {
		background: #f1f1f1;
		// padding-top: 16upx;
	}

	.row {
		display: flex;
		// align-items: center;
		position: relative;
		padding: 20rpx;
		height: 100%;
		background: #fff;
		border-bottom: 1rpx solid #e5e5e5;

		// margin-top: 10rpx;
		.tit {
			flex-shrink: 0;
			width: 170upx;
			font-size: 28upx;
			color: #303133;
		}

		.input {
			flex: 1;
			font-size: 28upx;
			color: #303133;
		}

		.icon-shouhuodizhi {
			font-size: 36upx;
			color: #909399;
		}
	}

	.default-row {
		margin-top: 20upx;

		.tit {
			flex: 1;
		}

		switch {
			transform: translateX(16upx) scale(.9);
		}
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: 32upx;
		letter-spacing: 4upx;
		color: #fff;
		background-color: #29ad97;
		border-radius: 50upx;
		box-shadow: 1px 2px 5px #dadada;
	}
</style>
